<template>
  <div class="body">
    <!-- 确认嫌疑人预留退款银行卡 -->
    <div class="bank_msg">
      <p class="title_box">确认嫌疑人预留退款银行卡</p>
      <div class="msg on-active">
        <el-form :model="form" :rules="rules" ref="updateForms">
          <div>
            <p class="title"><span>*</span>与本人关系</p>
            <p class="text">
              <el-radio-group v-model="relationships_id" @change="radioChange">
                <el-radio :value="item.value" v-for="(item,index) in radioList" :key="index">{{item.label}}</el-radio>
              </el-radio-group>
            </p>
          </div>
          <div>
            <p class="title"><span>*</span>姓名</p>
            <el-form-item prop="card_name" style="width: 100%;">
              <p class="input">
                <el-input
                  placeholder="请输入姓名"
                  size="medium"
                  v-model="form.card_name"
                ></el-input>
              </p>
            </el-form-item>
          </div>
          <div>
            <p class="title"><span>*</span>身份证号码</p>
            <el-form-item prop="card_idcard" style="width: 100%;">
              <p class="input">
                <el-input
                  placeholder="请输入身份证号码"
                  size="medium"
                  v-model="form.card_idcard"
                ></el-input>
              </p>
            </el-form-item>
          </div>
          <div>
            <p class="title"><span>*</span>选择开户行</p>
            <el-form-item prop="bank_id_name" style="width: 100%;">
              <p class="input">
                <el-select
                  v-model="changeValue"
                  placeholder="请选择开户行"
                  filterable
                  @change="changeBank"
                >
                  <el-option
                    v-for="item in bankList"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
              </p>
            </el-form-item>
          </div>

          <div v-if="isQt">
            <p class="title"><span>*</span>开户行名称</p>
            <el-form-item prop="bank_id_name" style="width: 100%;">
              <p class="input">
                <el-input
                  placeholder="请输入开户行名称"
                  size="medium"
                  v-model="form.bank_id_name"
                ></el-input>
              </p>
            </el-form-item>
          </div>

          <div>
            <p class="title"><span>*</span>支行名称</p>
            <el-form-item prop="bank_name" style="width: 100%;">
              <p class="input">
                <el-input
                  placeholder="示例：xxx支行"
                  size="medium"
                  v-model="form.bank_name"
                ></el-input>
              </p>
            </el-form-item>
          </div>

          <!-- <div>
            <p class="title"><span>*</span>开户行名称</p>
            <el-form-item prop="bank_name" style="width: 100%;">
              <p class="input">
                <el-input
                  placeholder="请输入开户行名称"
                  size="medium"
                  v-model="form.bank_name"
                ></el-input>
              </p>
            </el-form-item>
          </div> -->
          <div>
            <p class="title"><span>*</span>银行卡卡号</p>
            <el-form-item prop="card_number" style="width: 100%;">
              <p class="input">
                <el-input
                  placeholder="请输入银行卡卡号"
                  size="medium"
                  v-model="form.card_number"
                ></el-input>
              </p>
            </el-form-item>
          </div>
          <div>
            <p class="title"><span>*</span>手机号</p>
            <el-form-item prop="card_mobile" style="width: 100%;">
              <p class="input">
                <el-input
                  placeholder="请输入手机号"
                  size="medium"
                  v-model="form.card_mobile"
                ></el-input>
              </p>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>

    <div class="bank_msg" style="margin-top:22px">
      <p class="title_box">退款方式</p>
      <div class="msg on-active1">
        <el-radio-group v-model="tk_type">
          <el-radio :value="0">原路优先</el-radio>
          <el-radio :value="1">预留优先</el-radio>
        </el-radio-group>
      </div>
    </div>

    <!-- 上传作证材料原件 -->
    <div class="book_msg">
      <div class="anniu_title">
        <p class="title_box">上传作证材料原件</p>
        <el-button
          icon="Plus"
          size="mini"
          type="primary"
          @click="fileVisible = true"
        >上传文件</el-button>
      </div>
      <div class="msg">
        <div v-for="(item,index) in evidenceFileArr" :key="index">
          <div class="img" v-if="item.imagetype == 'pdf'">
            <svg-icon  name="pdf" color="red" width="100px" height="120px"></svg-icon>
            <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p>
          </div>

          <div class="img" v-if="item.imagetype == 'png'">
            <el-image 
            style="width: 100px; height: 120px;border-radius: 10px;"
            :src="item.url_new" 
            :preview-src-list="[item.url_new]"/>
            <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p>
          </div>
          <!-- <div class="up_msg">
            <p class="name">{{item.filename}}</p>
            <p class="text">渝公江北（经）取保字【2024】4号</p>
            <p class="time">{{item.uploadtime_text}}</p>
          </div> -->
        </div>
        <!-- <file-upload
          ref="uploadRef"
          :bailId="bailId"
          :disabled="false"
          :accept="'.pdf,.png'"
          :groupId="1"
          :limit="3"
          :fileList="fileList"
          @update:file-list="handleUpdateFileList"
          @success="handleSuccess"
        />
        <div class="up_msg">
          <p class="name"><span>*</span>作证材料原件</p>
          <p class="text">1.请上传清晰的取保候审报告书</p>
          <p class="text">2.图片大小不要超过10M</p>
        </div> -->
      </div>
    </div>

    <!-- 加文件 -->
    <el-dialog title="" v-model="fileVisible" >
      <update-file @submitFile="changeFileArr" @closeDrawer="closeFileVisible" :bailId="bailInfo.bail_id" :groupId="1"></update-file>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref,onMounted,defineExpose,defineProps, defineEmits } from "vue";
import { getYlBank, getBailInfo } from "@/api/bond/pay";
import { getPublic,getBindAtt } from "@/api/public";

const props = defineProps({
  bailId: {
    type: Number,
  },
  bailInfo: {
    type: Object,
  },
});



let isDisabled = ref(true);

const radioChange = (e: number) => {
  console.log(e);
  let {bank_name,bank_id_name,card_idcard,card_name,card_number} = formNew.value
  if(e == relationships_id_new.value){
    form.value = {
        card_name,
        card_idcard,
        bank_name,
        card_number,
      }
    changeValue.value = bank_id_name
  }else{
    form.value = {
      card_name: '',
      card_idcard:'',
      bank_name:'',
      card_number:'',
      card_mobile:''
    };
    changeValue.value = ''
  }
};

onMounted(() => {
  getPublicSource()

  getBankMsg()

  getFile()
});

const emit = defineEmits(["fileList"]);

// 获取公共数据
let radioList = ref([])
let bankList = ref([])
const getPublicSource = async()=>{
  await getPublic().then(res=>{
    if(res.code == 1){
      radioList.value = res.data.relationships
      bankList.value = res.data.bank_list
      bankList.value.push({
        label:'其他',
        value:0
      })
    }
  })
}

// 切换银行
let isQt = ref(false)
const changeBank = (e: any)=>{
  console.log(e)
  if(e == '其他'){
    isQt.value = true
    form.value.bank_id_name = ''
  }else{
    isQt.value = false
  }
  form.value.bank_name = ''
}

// 获取预留银行卡信息
let relationships_id = ref(1);
let relationships_id_new = ref(0)
let changeValue = ref('')
let form = ref({
  card_name: '',
  card_idcard:'',
  bank_id_name:'',
  bank_name:'',
  card_number:'',
  card_mobile:''
});
let formNew = ref({})
const getBankMsg = async()=>{
  await getYlBank({bail_id:props.bailInfo.bail_id}).then(res=>{
    if(res.code == 1){
      if(res.data&&res.data.bank_name){
        let {bank_name,bank_id_name,card_idcard,card_name,card_number,card_mobile} = res.data
        form.value = {
          card_name,
          card_idcard,
          bank_name,
          card_number,
          card_mobile
        }
        formNew.value = res.data
        changeValue.value = bank_id_name
        relationships_id.value = res.data.relation_ships.id
        relationships_id_new.value = res.data.relation_ships.id
      }
      
    }
  })
}

// 获取上传文件
let evidenceFileArr = ref([])
const getFile = async () => {
  let data = {
    bail_id: props.bailInfo.bail_id,
    group_id:1
  }
  await getBindAtt(data).then((res) => {
    if(res.code == 1){
      res.data.map((item: {url_new: any; url: any; })=>{
        item.url_new = import.meta.env.VITE_APP_file_API+item.url
      })
      evidenceFileArr.value = res.data
    }
  });
};

const rules = reactive({
  card_name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  card_idcard: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
  ],
  bank_name: [
    { required: true, message: '请输入开户行名称', trigger: 'blur' },
  ],
  card_number: [
    { required: true, message: '请输入银行卡卡号', trigger: 'blur' },
  ],
  card_mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
  ],
})

let tk_type = ref(props.bailInfo.bail.tk_type)

const updateForms = ref()


// 获取文件
let fileVisible = ref(false)
const closeFileVisible = ()=>{
  fileVisible.value = false
}
const changeFileArr = (arr:any)=>{
  fileVisible.value = false
  console.log(arr)
  evidenceFileArr.value = arr
}

// 删除文件
const del = (index:any)=>{
  evidenceFileArr.value.splice(index,1)
}

defineExpose({
  updateForms,
  relationships_id,
  form,
  tk_type,
  evidenceFileArr,
  changeValue
});




</script>

<style lang="scss" scoped>
.title_box {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 15px;
}
.bank_msg {
  margin: 0 30px;
  .on-active1{
    padding-top:10px !important;
    .el-radio-group{
      display: inline-grid;
    }
  }
  .on-active{
    ::v-deep .el-radio__inner{
      border-radius: 0;
      width: 16px;
      height: 16px;
    }
    ::v-deep .el-radio__input.is-checked .el-radio__inner::after {
      content: "";
      width: 8px;
      height: 4px;
      border: 2px solid white;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 3px;
      left: 2px;
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
    }
  }
 
  .msg {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 0 20px 10px 20px;
    div {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;
      line-height: 70px;
      .title {
        width: 120px;
        display: flex;
        align-items: center;
        span {
          color: red;
          margin-right: 6px;
          position: relative;
          top: 2px;
        }
      }
      
      .input {
        width: 50%;
        border: 1px solid #aaa;
        height: 38px;
        padding: 0 16px;
        border: 1px solid #c8c8c8;
        border-radius: 8px;
        display: flex;
        align-items: center;
        &.on {
          background: #e5e5e5;
        }
      }
      ::v-deep .el-input__inner {
        border: none !important;
        padding: 0;
        margin: 0;
        background: none;
      }
    }
  }
}
.book_msg {
  margin: 0 30px;
  margin-top: 32px;
  .anniu_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .title_box{
      margin-bottom:0;
    }
  }
  .msg {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 20px 20px;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    &>div{
      display: flex;
      margin:0 10px;
    }
    .img{
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      p{
        position: absolute;
        bottom:2px;
        right: 0;
        font-size:12px;
        width: 100%;
        height: 26px;
        background: #1F2E54;
        color:#fff;
        cursor: pointer;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .up_img {
      width: 100px;
      height: 120px;
    }
    .up_msg {
      line-height: 30px;
      text-align: left;
      margin-left: 12px;
      display: flex;
      flex-direction:column;
      justify-content: space-between;
      .name {
        color: #333333;
        font-size: 15px;
        font-weight: 500;
      }
      .text {
        font-size: 14px;
        color: #0046df;
        text-decoration: underline;
        cursor: pointer;
      }
      .time {
        color: #666666;
        font-size: 14px;
      }
    }
  }
}
::v-deep.el-input.is-disabled .el-input__wrapper{
  background: none;
  box-shadow: none;
}
::v-deep .el-input__wrapper{
  background: none;
  border:none;
  box-shadow: none;
}
::v-deep .el-form-item{
  margin-bottom:0;
}
::v-deep .el-form-item.is-error .el-input__wrapper{
  box-shadow: none;
}
::v-deep .el-select__wrapper{
  width: 100%;
  border:none;
  background: none;
  box-shadow:none;
}
::v-deep .el-select__wrapper:hover{
  box-shadow:none;
}
</style>
